<template>
	<div class="help-center">
		<div class="header">
			<div class="left">
				<img src="../../assets/img/help-center.png" alt="" />
				<span class="title">帮助中心</span>
			</div>
		</div>
		<div class="content">
			<div class="tree-list">
				<a-tree
					v-model:expandedKeys="expandedKeys"
					v-model:selectedKeys="selectedKeys"
					:tree-data="treeData"
					@select="change"
				>
					<template #title="{ title, key }">
						{{ title }}
					</template>
				</a-tree>
			</div>
			<div class="right-content">
				<div class="detail networking-usage" v-if="curKey == '3'">
          <h3 style="font-weight: bold">加密锁需要联网使用吗？</h3>
          <p>加密锁支持离线使用，但部分功能需联网才能正常使用，具体如下:</p>
          <p>
            <span class="sub-title">有效期更新：</span>
            <span>加密锁续费后，需联网更新资源有效期。</span>
          </p>
					<p>
            <span class="sub-title">挂失/解挂：</span>
            <span>加密锁挂失或取消挂失操作需联网进行。</span>
          </p>
					<p>
            <span class="sub-title">续订申请：</span>
            <span>加密锁续订需联网提交申请。</span>
          </p>
					<p>
            <span class="sub-title">留言反馈：</span>
            <span>用户留言反馈需联网提交。</span>
          </p>
        </div>
				<div class="detail" v-if="curKey == '1'">
					<h3 style="font-weight: bold">加密锁都有哪些状态？</h3>
					<p>“生效中”，加密锁内的资源存在服务中状态的；</p>
					<p>“无可用资源”，加密锁中的资源全部过期或者没有写入资源；</p>
					<p>“已挂失”，加密锁已进行挂失；</p>
					<p>“无效锁”，加密锁未绑定企业或个人主体信息。</p>
				</div>
				<div class="detail" v-if="curKey == '2'">
					<h3 style="font-weight: bold">如何进行加密锁挂失？</h3>
					<p>第一种方式：联系客户经理协助进行加密锁挂失。</p>
					<p>第二种方式：在驱动端加密锁服务功能找到“挂失”操作，通过加密锁绑定的手机号获取验证码的方式进行挂失。挂失时可同步申请补锁，管理人员给您补发新锁。</p>
          <br />
					<h3 style="font-weight: bold">挂失后旧加密锁是否还可以继续使用？</h3>
					<p>挂失后旧加密锁将无法使用。</p>
          <br />
					<h3 style="font-weight: bold">补发的加密锁是否需要重新购买服务？</h3>
					<p>不需要，挂失后会将旧加密锁中的资源重新写入新加密锁中。</p>
				</div>
				<div class="detail" v-if="curKey == '4'">
					<!-- <Renewal></Renewal> -->
					<h3 style="font-weight: bold">如何进行服务续订？</h3>
					<span
						>可联系客户经理进行服务续订；<br />可拨打客服热线：400-005-8008。</span
					>
				</div>
				<div class="detail" v-if="curKey == '5'">
					<h3 style="font-weight: bold">如何进行服务购买？</h3>
					<span
						>可联系客户经理进行服务购买。<br />进入加密锁驱动已购服务页面，点击下方加密锁服务宣传图，进入云算房官方网站，进行加密锁相关服务购买。</span
					>
				</div>
				<div class="detail six" v-if="curKey == '6'">
					<span
						><span style="font-weight: bold">问题描述：</span><br />电脑屏幕关闭/睡眠后，工程造价软件的加密锁断开，您可通过重新插拔加密锁恢复。或调整系统设置，保持加密锁在休眠状态下的持续连接，步骤如下：</span
					>
					<br />
					<span><span style="font-weight: bold">第一步：</span>右键点击屏幕左下角的“开始”，打开【设备管理器】控制面板，展开【通用串行总线控制器】（通常有多个）、【通用串行行总线设备】</span>
					<br />
					<img style="width: 100%" src="../../assets/img/screen.png" alt />
					<br />
					<span><span style="font-weight: bold">第二步：</span>双击或右击选择属性，切换到【电源管理】页签，取消【允许计算机关闭此设备以节约电源】，并确认勾选【允许此设备唤醒计算机】。</span>
					<br />
					<img style="width: 100%" src="../../assets/img/screen2.png" alt />
					<br />
					<span><span style="font-weight: bold">第三步：</span>对其余所有USB根集线器执行相同设置。（通常【通用串行总线控制器】的多个USB跟集线器中仅需要取消【允许计算机关闭此设备以节约电源】选项即可）</span>
					<br />
					<img style="width: 100%" src="../../assets/img/screen3.png" alt />
					<br />
					<span style="font-weight: bold">Windows 10 / Windows 11 (其他版本Windows类似，路径可能略有差异)</span>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Renewal from '../lock/renewal.vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const expandedKeys = ref(["1"]);
const selectedKeys = ref(["1"]);
let curKey = ref("1");
const treeData = [
	{
		title: "加密锁状态",
		key: "1",
	},
	{
		title: "加密锁挂失",
		key: "2",
	},
	{
		title: "联网使用",
		key: "3",
	},
	{
		title: "服务续订",
		key: "4",
	},
	{
		title: "服务购买",
		key: "5",
	},
	{
		title: "屏幕关闭导致加密锁断连",
		key: "6",
	},
];
onMounted(() => {
  // 获取参数
  const key = route.query.key;
	if(key) {
		curKey.value = key;
		selectedKeys.value = [key];
	}

});
let change = (e) => {
	curKey.value = e[0];
};
</script>

<style lang="scss" scoped>
.help-center {
	background: #f7f7f7;
	height: calc(100vh - 50px);
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120px;
		padding: 0 32px 0 60px;
		background: url("../../assets/img/user-bg.png");
		.title {
			font-size: 30px;
			color: #ffffff;
			margin-left: 14px;
		}
		.ant-btn {
			background: transparent;
			color: #ffffff;
		}
	}
	.content {
		display: flex;
		width: 100%;
		background: #ffffff;
		padding-left: 26px;
		height: calc(100% - 120px);
		.tree-list {
			width: 229px;
			padding-top: 22px;
			:deep(.ant-tree-list) {
				font-size: 14px;
			}
			:deep(.ant-tree-list .ant-tree-node-content-wrapper-normal) {
				font-size: 12px;
			}
			:deep(.ant-tree-node-selected) {
				color: #287cfa !important;
				background-color: white;
			}
		}
		.right-content {
			background: #f7f7f7;
			height: calc(100%);
			overflow-y: scroll;
			flex: 1;
			padding: 30px 147px 40px 90px;
			.detail {
				background: #ffffff;
				padding: 17px 20px 17px 32px;
				p {
					margin-bottom: 0px;
				}
				.sub-title{
					font-weight: bold;
				}
				&.six {
					p {
						padding-bottom: 8px;
					}
					span {
						line-height: 1.6;
					}
					img {
						padding: 10px 0px;
					}
				}
			}
		}
	}
}
.networking-usage {
	p {
		padding: 2px 0px;
	}
}
</style>
